<template>
  <div class="box">
    <form action="">
      <input
        type="text"
        placeholder="请输入数字"
        ref="ipt"
        @blur="confirm"
        v-model="value"
        autocomplete="flase"
      />
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const ipt = ref()
const value = ref()

const confirm = () => {
  const keyframs = new KeyframeEffect(
    ipt.value,
    [
      {
        transform: 'translate(0)'
      },
      {
        transform: 'translate(-10%)'
      },
      {
        transform: 'translate(10%)'
      },
      {
        transform: 'translate(-5%)'
      },
      {
        transform: 'translate(0)'
      }
    ],
    {
      duration: 500
    }
  )
  const ani = new Animation(keyframs)
  if (!/^\d+$/.test(value.value) && value.value !== '') {
    ani.play()
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
}
input {
  width: 200px;
  height: 30px;
  margin-top: 100px;
  border-radius: 5px;
  border: 1px solid #000;
  box-sizing: border-box;
  padding-left: 10px;
}
</style>
